<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Photo Upload Demo</title>
    <style type="text/css">
        body,input,form,span,div{font-family:Tahoma;font-size:8pt;}
    </style>
    <script type="text/javascript">
    /* <![CDATA[ */
        var PROGRESS_INTERVAL = 500;
        var PROGRESS_COLOR = '#000080';

        var _divFrame;
        var _divUploadMessage;
        var _divUploadProgress;
        var _ifrPhoto;

        var _loopCounter = 1;
        var _maxLoop = 10;
        var _photoUploadProgressTimer;

        function initPhotoUpload()
        {
            _divFrame = document.getElementById('divFrame');
            _divUploadMessage = document.getElementById('divUploadMessage');
            _divUploadProgress = document.getElementById('divUploadProgress');
            _ifrPhoto = document.getElementById('ifrPhoto');

            var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

            btnUpload.onclick = function(event)
            {
                var filPhoto = _ifrPhoto.contentWindow.document.getElementById('filPhoto');

                //Baisic validation for Photo
                _divUploadMessage.style.display = 'none';

                if (filPhoto.value.length == 0)
                {
                    _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please specify the file.</span>';
                    _divUploadMessage.style.display = '';
                    filPhoto.focus();
                    return;
                }

                var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF|.png|.PNG|.bmp|.BMP)$/;

                if (!regExp.test(filPhoto.value)) //Somehow the expression does not work in Opera
                {
                    _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports jpg, gif, png and bmp.</span>';
                    _divUploadMessage.style.display = '';
                    filPhoto.focus();
                    return;
                }

                beginPhotoUploadProgress();
                _ifrPhoto.contentWindow.document.getElementById('photoUpload').submit();
                _divFrame.style.display = 'none';
            }
        }

        function beginPhotoUploadProgress()
        {
            _divUploadProgress.style.display = '';
            clearPhotoUploadProgress();
            _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
        }

        function clearPhotoUploadProgress()
        {
            for (var i = 1; i <= _maxLoop; i++)
            {
                document.getElementById('tdProgress' + i).style.backgroundColor = 'transparent';
            }

            document.getElementById('tdProgress1').style.backgroundColor = PROGRESS_COLOR;
            _loopCounter = 1;
        }

        function updatePhotoUploadProgress()
        {
            _loopCounter += 1;

            if (_loopCounter <= _maxLoop)
            {
                document.getElementById('tdProgress' + _loopCounter).style.backgroundColor = PROGRESS_COLOR;
            }
            else 
            {
                clearPhotoUploadProgress();
            }

            if (_photoUploadProgressTimer)
            {
                clearTimeout(_photoUploadProgressTimer);
            }

            _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
        }

        function photoUploadComplete(message, isError)
        {
            clearPhotoUploadProgress();

            if (_photoUploadProgressTimer)
            {
                clearTimeout(_photoUploadProgressTimer);
            }

            _divUploadProgress.style.display = 'none';
            _divUploadMessage.style.display = 'none';
            _divFrame.style.display = '';

            if (message.length)
            {
                var color = (isError) ? '#ff0000' : '#008000';

                _divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
                _divUploadMessage.style.display = '';

                if (isError)
                {
                    _ifrPhoto.contentWindow.document.getElementById('filPhoto').focus();
                }
            }
        }
    /* ]]> */
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width:400px">
            <fieldset>
                <legend>Photo Upload Demo</legend>
                <div id="divFrame">
                    <iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:55px" src="PhotoUpload.aspx"></iframe>
                </div>
                <div id="divUploadMessage" style="padding-top:4px;display:none"></div>
                <div id="divUploadProgress" style="padding-top:4px;display:none">
                    <span style="font-size:smaller">Uploading photo...</span>
                    <div>
                        <table border="0" cellpadding="0" cellspacing="2" style="width:100%">
                            <tbody>
                                <tr>
                                    <td id="tdProgress1">&nbsp; &nbsp;</td>
                                    <td id="tdProgress2">&nbsp; &nbsp;</td>
                                    <td id="tdProgress3">&nbsp; &nbsp;</td>
                                    <td id="tdProgress4">&nbsp; &nbsp;</td>
                                    <td id="tdProgress5">&nbsp; &nbsp;</td>
                                    <td id="tdProgress6">&nbsp; &nbsp;</td>
                                    <td id="tdProgress7">&nbsp; &nbsp;</td>
                                    <td id="tdProgress8">&nbsp; &nbsp;</td>
                                    <td id="tdProgress9">&nbsp; &nbsp;</td>
                                    <td id="tdProgress10">&nbsp; &nbsp;</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </fieldset>
        </div>
    </form>
</body>
</html>